<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" >

  <f:view contentType="text/html">



	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
		<title>Login</title>
		<link href="style/dm-style.css" rel="stylesheet" type="text/css" />

		<style type="text/css">
	
			a:link {
				color: #FFF;
				text-decoration: none;
			}
			
			a:visited {
				text-decoration: none;
				color: #FFF;
			}
			
			a:hover {
				text-decoration: underline;
				color: #0FF;
			}
			
			a:active {
				text-decoration: none;
				color: #FFF;
			}
	
		</style>
		
		<h:panelGroup id="mensagens">
					<h:outputScript rendered="#{not empty facesContext.messageList}">
						<a4j:repeat value="#{facesContext.messageList}" var="message">
							alert("<h:outputText value="#{message.summary}" />");
						</a4j:repeat>
					</h:outputScript>
		</h:panelGroup>
		
		<a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" /> 
				<rich:popupPanel id="statPane" autosized="true"> 
					<h:outputText value="Aguarde..." styleClass="output-style"/> 
				</rich:popupPanel> 

	</h:head>



	<body>

		<div class="conteiner">
			<div class="topo">
				<div class="logo">
					<div class="logo_inside">
						<img src="images/dm_logo.jpg" width="151" height="59" ></img>
					</div>
					<div class="logo_lupa">
						<img src="images/lupa.jpg" width="24" height="24" ></img>
					</div>
					<div class="logo_search" align="right">
						<label> <input type="text" name="textfield" id="textfield" /></label>
					</div>
				</div>
				<div class="menu">
					<div class="menu_inside_1" align="center">
						<a href="#">Capa</a>
					</div>
					<div class="menu_inside_2" align="center">
						<a href="#">Cidades</a>
					</div>
					<div class="menu_inside_3" align="center">
						<a href="#">Política e Justiça</a>
					</div>
					<div class="menu_inside_2" align="center">
						<a href="#">Esportes</a>
					</div>
					<div class="menu_inside_1" align="center">
						<a href="#">Brasil</a>
					</div>
					<div class="menu_inside_4" align="center">
						<a href="#">Mundo</a>
					</div>
					<div class="menu_inside_5" align="center">
						<a href="#">Economia</a>
					</div>
					<div class="menu_inside_6" align="center">
						<a href="#">Variedades</a>
					</div>
					<div class="menu_inside_7" align="center">
						<a href="#">Entretenimento</a>
					</div>
				</div>
			</div>
			<div class="meio1">
				<img src="images/dm_cartao.jpg" width="170" height="234" ></img>
			</div>
			<div class="meio2"></div>
			<div class="meio3" align="center">
			
				<span id="text1">
					<img src="images/spacer.gif" width="170" height="15" ></img>VANTAGENS
				</span><br />
				
				<span id="text2">Agora seu novo cartão DM Clube<br /> com muito mais vantagens.</span>
			</div>
			<div class="search_fundo">
			
			  <h:form  id="formlogin" onkeypress="if (event.keyCode == 13) { document.getElementById('formlogin:loginSubmit').click(); return false; }">
				<div class="search_ret1">
					<div class="search_campos1"></div>
					<div class="search_campos2">
						<strong>MINHA CONTA</strong>
					</div>
					<div class="search_campos3"></div>
					<div class="search_campos1" align="right">
						<strong>login:</strong>
					</div>
					<div class="search_campos2">
					    <h:inputText name="textfield2" style="width: 210px" value="#{loginUsaPreBean.login}" size="25" styleClass="inputstyle" />
						<!--<label for="textfield2"></label> <input type="text" name="textfield2" id="textfield" style="width: 210px" /> -->
					</div>
					<div class="search_campos3"></div>
					<div class="search_campos1" align="right">
						<strong>senha:</strong>
					</div>
					<div class="search_campos2">
					    <h:inputSecret name="textfield3" style="width: 210px" value="#{loginUsaPreBean.senha}" size="25" styleClass="inputstyle" />
					</div>
					
					<div class="search_campos3">
						<a4j:commandLink id="loginSubmit" styleClass="link_Botaolaranja" action="#{loginUsaPreBean.logon}" value="login" render="mensagens" align="left"/>
					</div>
					
					<div class="search_campos1"></div>
					<div class="search_campos2" align="center">
						<a href="#" id="link_laranja">Não consigo logar</a> | 
						<a4j:commandLink styleClass="link_Botaolaranja" value="Primeiro acesso" action="#{telaInicialBean.primeiroAcesso}" />
					</div>
					
					<div class="search_campos3"></div>
				</div>
			 </h:form>
			 
			</div>
			<div class="rodape" align="right">
				<img src="images/logo.jpg" width="81" height="54" ></img>
			</div>
		</div>

	</body>

</f:view>
</html>
